<template>
	<div class="container">
		<button type="button" class="btn btn-primary mx-2 mb-2">getTrip</button>
		<button type="button" class="btn btn-secondary mx-2 mb-2" @click="handleLogin">login</button>
		<button type="button" class="btn btn-success mx-2 mb-2" @click="createTrip">createTrip</button>
		<button type="button" class="btn btn-danger mx-2 mb-2">Danger</button>
		<button type="button" class="btn btn-warning mx-2 mb-2">Warning</button>
		<button type="button" class="btn btn-info mx-2 mb-2">Info</button>
		<button type="button" class="btn btn-dark mx-2 mb-2">Dark</button>
		<div class="mb-3 mt-3">
			<input class="form-control form-control-sm" type="file" name="img" multiple="multiple" ref="fileInput" @change="handChange" />
		</div>
		<div>
			<img class="img-fluid mb-3 rounded-3 w-75" src="https://w.wallhaven.cc/full/z8/wallhaven-z8dg9y.png" />
		</div>

		<button type="button" class="btn btn-dark mx-2 mb-2">Dark</button>
	</div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue"
import request from "@/utils/request"
import { auth } from "@/model/auth_out/auth_pb"
import axios from "axios"

export default defineComponent({
	name: "Home",
	setup() {
		const fileInput = ref<null | HTMLInputElement>(null)

		const handleLogin = () => {
			// request
			// 	.post("/v1/auth/login", {
			// 		account: "18978057575",
			// 		password: "1234516",
			// 	} as auth.v1.ILoginRequest)
			// 	.then(res => {
			// 		const authRes = auth.v1.LoginResponse.fromObject(camelcaseKeys(res.data, { deep: true }))
			// 		console.log("res", res)
			// 		console.log("authRes", authRes)
			// 		console.log("authRes.accessToken", authRes.userId)
			// 	})
			// 	.catch(console.error)

			request
				.post("/v1/auth/login", {
					account: "18978057575",
					password: "1234516",
				} as auth.v1.ILoginRequest)
				.then(res => {
					console.log("res", res)
				})
				.catch(console.error)
		}

		const createTrip = () => {
			request
				.post("/v1/trip")
				.then(res => {
					console.log("res", res)
				})
				.catch(console.error)
		}

		// 使用arryBuffer进行传输
		const handChange = (e: Event) => {
			const target = e.target as HTMLInputElement
			const file = target.files
			if (file) {
				const uploadFile = file[0]

				// var fr = new FileReader()
				// 1.File转base64
				// fr.readAsDataURL(uploadFile)	// 这种传参方式不行

				// 2.File转arrayBuffer
				// fr.readAsArrayBuffer(uploadFile)
				// fr.addEventListener(
				// 	"loadend",
				// 	e => {
				// 		if (e.target) {
				// 			const blob = new Blob(e.target.result,{type:"xxx/xxx"})

				// 			axios
				// 				.put(
				// 					"https://coolcar-1305922819.cos.ap-guangzhou.myqcloud.com/acacacac.jpg?q-sign-algorithm=sha1&q-ak=AKIDFI5csqXyB9rJUNzKPEn57rLZWEgsoTry&q-sign-time=1638953139%3B1638956739&q-key-time=1638953139%3B1638956739&q-header-list=host&q-url-param-list=&q-signature=087be65be0b81c2d0014dca27aa8d44f2d55d9fc",
				// 					e.target.result,
				// 					{
				// 						headers: {
				// 							"Content-Type": "multipart/form-data",
				// 						},
				// 					}
				// 				)
				// 				.then(console.log)
				// 				.catch(console.error)
				// 		}
				// 	},
				// 	false
				// )

				// 4.File直传
				axios
					.put(
						"https://coolcar-1305922819.cos.ap-guangzhou.myqcloud.com/account1/61b0b058dd2a896c90a42b37?q-sign-algorithm=sha1&q-ak=AKIDFI5csqXyB9rJUNzKPEn57rLZWEgsoTry&q-sign-time=1638969432%3B1638970432&q-key-time=1638969432%3B1638970432&q-header-list=host&q-url-param-list=&q-signature=a2333adfd81048984658848cde5d5e7728ce65ca",
						uploadFile
					)
					.then(console.log)
					.catch(console.error)
			}
		}

		return {
			handleLogin,
			createTrip,
			fileInput,
			handChange,
		}
	},
})
</script>

<style></style>
